<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container last_container use-table">
			<!-- <div class="dflex_vertical_c margin_b_20 table-head">
				<div class="dflex_vertical_c">
					<div class="search_name">下单人名称：</div>
					<el-input v-model="req.order_member_name" placeholder="请输入" class="search_input" @change="search"
						clearable></el-input>
				</div>
				<div class="dflex_vertical_c margin_l_10">
					<div class="search_name">结算时间：</div>
					<el-date-picker v-model="searchTime" type="daterange" align="right" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
						:picker-options="pickerTimeOptions" class="search_start_end_time" @change="search">
					</el-date-picker>
				</div>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_l_10" @click="search">搜索
				</el-button>
			</div> -->
			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row
				@sort-change="sortable">
				<el-table-column label="下单人" align="center" width="180">
					<template slot-scope="scope">
						<div class="dflex_vertical_c">
							<div class="pos_r">
								<el-image class="headimg_small"
									:src="scope.row.order_member_headimg || 'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'"
									:preview-src-list="scope.row.imgs" fit="contain"></el-image>
								<div class="pos_a class-name">{{dataId == scope.row.order_fxs_uid ? '下级' : '下下级'}}</div>
							</div>
							<div class="margin_l_5">{{ scope.row.order_member_name || '--' }}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="支付方式" align="center">
					<template slot-scope="scope">
						<div>{{ scope.row.order_pay_way || '--' }}</div>
					</template>
				</el-table-column>
				<el-table-column property="order_way" label="下单方式" align="center"></el-table-column>
				<el-table-column property="is_fxs" label="分销" align="center"></el-table-column>
				<el-table-column property="is_settlement" label="是否已结算" align="center"></el-table-column>
				<el-table-column label="上级佣金" align="center">
					<template slot-scope="scope">
						<div class="price">{{ scope.row.order_fxs_amount / 100 }}</div>
					</template>
				</el-table-column>
				<el-table-column label="上上级佣金" align="center">
					<template slot-scope="scope">
						<div class="price">{{ scope.row.order_fxs_amount2 / 100 }}</div>
					</template>
				</el-table-column>
				<el-table-column sortable="custom" label="结算时间" align="center">
					<template slot-scope="scope">
						<div>{{ scope.row.settlement_time || '--'}}</div>
					</template>
				</el-table-column>
				<div slot="empty">
					<el-empty description=" "></el-empty>
				</div>
			</el-table>
			<el-pagination background :current-page="req.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper" :total="tableTotal" @size-change="sizeChange"
				@current-change="currentChange"></el-pagination>
		</div>
	</div>
</template>

<script>
	const __name = 'wmzmall-order';
	export default {
		data() {
			return {
				dataId: '',
				searchTime: [],
				req: {
					page: 1,
					rows: 10,
					orderby: 'settlement_time asc',
					order_member_name: '',
					begin_time: '',
					end_time: ''
				},
				tblHeight: 0,
				tableLoading: false,
				tableDatas: [],
				tableTotal: 0,
				pickerTimeOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
							text: '今天',
							onClick(picker) {
								picker.$emit('pick', new Date());
							}
						},
						{
							text: '昨天',
							onClick(picker) {
								const date = new Date();
								date.setTime(date.getTime() - 3600 * 1000 * 24);
								picker.$emit('pick', date);
							}
						},
						{
							text: '一周前',
							onClick(picker) {
								const date = new Date();
								date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit('pick', date);
							}
						}
					]
				},
				searchBtnLoading: false
			};
		},
		methods: {
			async loadData(callback) {
				this.tableLoading = true;

				this.req.begin_time = '';
				this.req.end_time = '';

				if (this.searchTime && this.searchTime.length > 0) {
					this.req.begin_time = this.searchTime[0].getTime();
					this.req.end_time = this.searchTime[1].getTime() + (60 * 60 * 24 - 1) * 1000;
				}

				await this.$db[__name]
					.where(
						`(order_fxs_uid == '${this.dataId}' || order_fxs_uid2 == '${this.dataId}') && is_fxs == '是' && order_pay_state == '已付款'`
					)
					.whereif(this.req.order_member_name, {
						order_member_name: new RegExp(this.$api.filterRegexpKey(this.req.order_member_name), 'i')
					})
					.whereif(this.searchTime && this.searchTime.length > 0, {
						settlement_time: this.$db.$cmd.gte(this.req.begin_time).and(this.$db.$cmd.lte(this.req
							.end_time))
					})
					.totable(this.req)
					.then(res => {
						if (res.code == 200) {
							res.datas.rows.forEach((row, idx) => {
								if (row.settlement_time) {
									row.settlement_time = new Date(row.settlement_time).format();
								}
								row.imgs = [(row.order_member_headimg && row.order_member_headimg.replace(
										"/132", "/0")) ||
									'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'
								];
							});
							this.tableDatas = res.datas.rows;
							this.tableTotal = res.datas.total;

							if (typeof callback === 'function') {
								callback();
							}
						}
						this.searchBtnLoading = false;
						this.tableLoading = false;
					});
			},
			search() {
				this.req.page = 1;
				this.$api.storagePaginationPage(this.req.page, this.$route.path + '-order');
				this.searchBtnLoading = true;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});

				uni.setStorage({
					key: '__search' + this.$route.path + '-order',
					data: this.req
				});
			},
			sortable(column) {
				if (column.order) {
					column.order = column.order.replace('ending', '');
				}

				this.req.orderby = column.prop + ' ' + (column.order || 'desc');

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});
			},
			sizeChange(size) {
				this.$api.storagePaginationRows(size, this.$route.path + '-order');
				this.req.page = 1;
				this.$api.storagePaginationPage(this.req.page, this.$route.path + '-order');
				this.req.rows = size;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});
			},
			currentChange(current) {
				this.$api.storagePaginationPage(current, this.$route.path + '-order');
				this.req.page = current;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});
			}
		},
		created() {
			let __search = uni.getStorageSync('__search' + this.$route.path + '-order');
			if (__search) {
				this.req = __search;
				if (this.req.begin_time && this.req.end_time) {
					this.searchTime.push(new Date(this.req.begin_time), new Date(this.req.end_time));
				}
			}

			this.req.page = uni.getStorageSync('__paginationPage' + this.$route.path + '-order') || 1;
			this.req.rows = uni.getStorageSync('__paginationRows' + this.$route.path + '-order') || 10;

			this.dataId = this.$route.query.id || '';
			this.loadData(() => {
				this.$nextTick(() => {
					this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path + '-order');
				});
			});
		},
		mounted() {
			this.$nextTick(() => {
				this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path + '-order');
			});
		},
		updated() {
			if (!this.tblHeight) {
				this.tblHeight = this.$refs.tbl.tblHeight;
			}
		}
	};
</script>

<style>
	.class-name {
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		color: rgba(255, 255, 255, 1);
		width: max-content;
		padding: 4px 6px;
		line-height: 1;
		font-size: 12px;
		background-color: #f46f4d;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	}
</style>
